<template>
  <view class="tab" >
    <view :class="['tab-item', active === index ? 'active' : '']" v-for="(item, index) in tabList" :key="index" @click="changeTab(item, index)" >
      {{item.name}}
    </view>
  </view>
</template>
<script lang='ts'  setup >
import { ref } from 'vue'
 export interface IProps {
  tabList: {name: string, status: number | string}[]
 }

 const props = defineProps<IProps>()

 const active = ref(0)

 const emits = defineEmits(['change'])
 const changeTab = (item: {name: string, status: number | string}, index: number) => {
  active.value = index
  emits('change', item.status)
 }

</script>
<style lang='less' scoped >
 @import '../../styles/index.less';
 .tab {
  width: 100vw;
  height: 106rpx;
  padding: 0 48rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background-color: #faf7f7;
  position: fixed;
  top: 0;
  left: 0;
  .tab-item {
    color: #000;
    font-size: 30rpx;
    font-family: Italiana sans-serif;
    margin-right: 60rpx;
    box-sizing: border-box;
    padding-bottom: 8rpx;
    border-bottom: 8rpx solid transparent;
    transition: font-size 0.1s linear;
  }
  .active {
    font-weight: 700;
    font-size: 34rpx;
    color: @main-color;
    border-bottom: 8rpx solid @main-color;
    
  }
 }
</style>